<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery-ztree-2.5.js"></script>
  <script type="text/javascript" src="asyncData/demoData.js"></script>
  <script type="text/javascript" src="demoTools.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var zTree1;

		var setting = {
			expandSpeed: "",
			showLine: true
		};

	$(document).ready(function(){
		reloadTree("1");
	});

	var curType = '0';
	var curLi;
	function reloadTree(type) {
		if (curLi) curLi.removeClass("focus");
		$("#sim").attr("disabled", true);
		$("#flag").attr("disabled", true);
	
		var setting1 = clone(setting);
		var zNodes1 = clone(zNodes);

		if (!type) type = (curType=='0') ? '1' : curType;
		
		if (type=="1") {
			setting1.showLine = true;
			curLi = $("#defaultStyle");
			
		} else if (type=="2") {
			setting1.showLine = false;
			curLi = $("#noLineStyle");
			
		} else if (type=="3") {
			setting1.showLine = true;

			zNodes1[0].icon = "demoStyle/img/phone.gif";
			zNodes1[2].icon = "demoStyle/img/home.gif";
			zNodes1[1].nodes[0].icon = "demoStyle/img/hardware.gif";
			zNodes1[1].nodes[2].icon = "demoStyle/img/people.gif";
		
			curLi = $("#diyIconStyle");
		} else if (type=="5") {
			setting1.showIcon = false;
			curLi = $("#noIconStyle");}
	
		curLi.addClass("focus");
		curType = type;
		zTree1 = $("#treeDemo").zTree(setting1, zNodes1);
		
	}
  //-->
  </SCRIPT>
  
 </HEAD>

<BODY>
<center class="headTitle">兼容IE6的演示</center>
<TABLE border=0 width="700" class="tb1">
	<TR>
		<TD width=340px align=center valign=top>
		<div class="zTreeDemoBackground">
			<ul id="treeDemo" class="tree"></ul>
		</div>		
		</TD>
		<TD width=360px align=left valign=top>
		<div class="demoContent">
			<li class="title focus">
				<button class="ico books" onfocus="this.blur();"></button>建议说明
				<ul class="remark">1、不要加载 zTreeIcons.css</ul>
				<ul class="event">
					<li>&nbsp;&nbsp;对于 "button.a.b{...}" 这种 css 选择器的方法IE6是不支持的，因此不要加载 zTreeIcons.css，也就不要使用css自定义图标这个功能了</li>
				</ul>
				<ul class="remark">2、不要使用 png 图片</ul>
				<ul class="event">
					<li>&nbsp;&nbsp;IE6对于png图片的透明显示一直是个很大问题，因此需要支持IE6的朋友，请将png图片全部制作为gif图片</li>
				</ul>
				<ul class="remark">3、取消展开、折叠特效 &nbsp;setting.expandSpeed = "";</ul>
				<ul class="event">
					<li>&nbsp;&nbsp;jQuery默认的动画效果在IE6下效果很差，因此如果您的zTree必须兼容IE6，那么请取消zTree的动画效果</li>
				</ul>
				<ul class="remark">4、节点较多时，建议使用异步加载模式</ul>
				<ul class="event">
					<li>&nbsp;&nbsp;浏览器整体的性能都不是特别好，尤其是IE，因此对于节点总数较多，每层节点数不多，层数较复杂的情况，建议使用异步加载模式，因为异步加载模式最大的好处就是用多少加载多少，对于一个复杂的树来说，用户访问页面时一般情况下是不会一个个全部节点点击一遍</li>
					<li></li>
					<li>&nbsp;&nbsp;对于同级节点数据量很多时，建议模仿“大数据量演示”下的“高级异步加载”的例子进行自定义的异步加载</li>
				</ul>
					
			</li>
			<li class="title">
				<button class="ico skin" onfocus="this.blur();"></button>显示样式设置
				<ul class="remark">——点击以下不同样式，看看有什么变化</ul>
				<ul>
					<li id="defaultStyle" class="menu" onclick="reloadTree('1')">
						<button class="ico star" onfocus="this.blur();"></button>默认样式</li>
					<li id="noLineStyle" class="menu" onclick="reloadTree('2')">
						<button class="ico star" onfocus="this.blur();"></button>不显示节点连线</li>
					<li id="noIconStyle" class="menu" onclick="reloadTree('5')">
						<button class="ico star" onfocus="this.blur();"></button>不显示节点图标</li>
					<li id="diyIconStyle" class="menu" onclick="reloadTree('3')">
						<button class="ico star" onfocus="this.blur();"></button>icon属性自定义图标</li>
					<li id="cssIconStyle" class="menu" onclick="alert('由于ie6对于css选择器的支持问题，因此ie6无法兼容此种类型的图标')">
						<button class="ico star" onfocus="this.blur();"></button>css自定义图标（<font color="red">不兼容IE6</font>）
					</li>
					<ul>
						<INPUT TYPE="radio" id="sim" disabled NAME="cssSkin" onclick="reloadTree('4');">sim 系列
						<INPUT TYPE="radio" id="flag" disabled NAME="cssSkin" onclick="reloadTree('4');">flag 系列
					</ul>
				</ul>
			</li>	
		</div>	
		</TD>
	</TR>
</TABLE>

 </BODY>
</HTML>
